<template>
    <div>
       <div class="head">
           <div class="pho">
              <div class="pic">
                  <image :src="src1" class="pic1"></image>
                  <text class="pic_text">收款</text>
              </div>
              <div class="pic">
                  <image :src="src2" class="pic2"></image>
                  <text class="pic_text">扫码核销</text>
              </div>
              <div class="pic">
                  <image :src="src3" class="pic3"></image>
                  <text class="pic_text">订单</text>
              </div>
              <div class="pic">
                  <image :src="src4" class="pic4"></image>
                  <text class="pic_text">钱包</text>
              </div>
           </div>
       </div> 
       <div class="text">
           <text class="today_money">今日收款:</text>
           <text class="money_record">收款统计</text>
       </div>
       <text class="money1">￥{{money}}</text>
       <div class="benifit">
           <div class="named">
               <text class="be_money">线上收款</text>
               <text class="ne_money">{{count1}}</text>
           </div>
           <div class="named1">
               <text class="be_money">扫码收款</text>
               <text class="ne_money">{{count2}}</text>
           </div>
           <div class="named2">
               <text class="be_money">昨日收益</text>
               <text class="ne_money">{{count3}}</text>
           </div>
       </div>
       <div class="text_text">
           <text class="receipt">最近收款</text>
           <text class="receipt_record">全部记录</text>
       </div>
       <div class="listt" v-for="( index,item ) in list" :key="index.item">
           <div class="date_time">
               <text class="date">{{index.date}}</text>
               <text class="time">{{index.time}}</text>
           </div>
           <text class="date_text1">{{index.describe}}</text>
       </div>
       <div class="foot">
           <div class="shop" @click="jump1()">
               <image :src="src1_1" class="shop_img1"></image>
               <text class="shop_text1">店铺</text>
           </div>
           <div class="pay" @click="jump2()">
               <image :src="src1_2" class="shop_img2"></image>
               <text class="shop_text2">收款</text>
           </div>
           <div class="news" @click="jump3()">
               <image :src="src1_3" class="shop_img3"></image>
               <text class="shop_text3">消息</text>
           </div>
           <div class="mine" @click="jump4()">
               <image :src="src1_4" class="shop_img4"></image>
               <text class="shop_text4">我的</text>
           </div>
        </div>
    </div>
</template>
<style scoped>
  .head{
    width: 100%;
    height: 113px;
    background-color: #33c179;
    box-shadow: 3px 3px 1px #eee;
  }
  .listt{
    width: 100%;
    height: 96px;
    padding-left: 12px;
    padding-right: 12px;
    /*flex-direction: row;*/
    border-bottom: solid 1px #d8d7d7;
  }
  .date_text1{
    margin-top: 16px;
    font-size: 15px;
    color: #444;
  }
  .date_time{
    height: 14px;
    flex-direction: row;
    margin-top: 9px;
  }
  .foot{
        flex-direction: row;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 48px;
        border-top: solid 1px #eee;
        justify-content: space-around;
        box-sizing: border-box;
        box-shadow: 2px 1px 1px #ccc;
        background-color: #fff;
        z-index: 1;  
    }
    .shop_img1,.shop_img2,.shop_img3,.shop_img4{
        width: 19px;
        height: 20px;
        /*background-color: silver;*/
        z-index: 1;
    }
    .shop,.pay,.news,.mine{
        width: 40px;
        height: 48px;
        padding-top: 5px;
        align-items: center;
        z-index: 1;
    }
    .shop_text1,.shop_text2,.shop_text3,.shop_text4{
        font-size: 13px;
        width: 80px;
        text-align: center;
        justify-content: center;
        margin-top: 6px;
        color: #999;
        z-index: 1;
    }
  .date{
    height: 14px;
    line-height: 14px;
    color: #666;
    font-size: 14px;
  }
  .time{
    height: 14px;
    line-height: 14px;
    color: #666;
    font-size: 14px;
    margin-left: 33px;
  }
  .pho{
    width: 293px;
    height: 60px;
    /*background-color: pink;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 31px;
    flex-direction: row;
    justify-content: space-between;
  }
  .pic{
    width: 32px;
    height: 60px;
    /*background-color: red;*/
    /*justify-content: center;*/
  }
  .pic1{
    width: 25px;
    height: 26px;
    background-color: #dedede;
    margin-left: auto;
    margin-right: auto;
  }
  .pic2{
    width: 25px;
    height: 28px;
    background-color: #dedede;
    margin-left: auto;
    margin-right: auto;
  }
  .pic3{
    width: 23px;
    height: 28px;
    background-color: #dedede;
    margin-left: auto;
    margin-right: auto;
  }
  .pic4{
    width: 25px;
    height: 26px;
    background-color: #dedede;
    margin-left: auto;
    margin-right: auto;
  }
  .pic_text{
    height: 32px;
    line-height: 28px;
    color: #fff;
    margin-top: 11px;
    font-size: 15px;
  }
  .text{
    width: 100%;
    height: 24px;
    /*background-color: pink;*/
    margin-top: 31px;
    flex-direction: row;
  }
  .today_money{
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    color: #333;
    font-weight: bolder;
    margin-left: 12px;
  }
  .money_record{
    margin-left: 156px;
    color: #33c179;
    font-size: 16px;
    font-weight: bold;
  }
  .money1{
    height: 33px;
    font-size: 33px;
    width: 100%;
    text-align: center;
    line-height: 33px;
    margin-top: 52px;
  }
  .benifit{
    width: 100%;
    height: 58px;
    flex-direction: row;
    padding-left: 12px;
    padding-right: 12px;
    /*background-color: red;*/
    margin-top: 45px;
    justify-content: space-between;
  }
  .named{
    width: 104px;
    height: 58px;
    border-radius: 10px;
    background-color: #33c1bc;
  }
  .named1{
    width: 104px;
    height: 58px;
    border-radius: 10px;
    background-color: #91c133;
  }
  .named2{
    width: 104px;
    height: 58px;
    border-radius: 10px;
    background-color: #33c191;
  }
  .be_money{
    height: 14px;
    line-height: 14px;
    color: #edeaea;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    font-size: 14px;
  }
  .ne_money{
    height: 15px;
    line-height: 15px;
    color: #c6dea1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
  .receipt_record{
    /*width: 100%;*/
    height: 32px;
    color: #33c179;
    font-size: 14px;
    font-weight: bold;
  }
  .text_text{
    flex-direction: row;
    margin-top: 63px;
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    height: 32px;
    justify-content: space-between;
    border-bottom: solid 1px #d8d7d7;
  }
  .receipt{
    height: 32px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
</style>
<script>
    export default {
       
        data () {
            return {
               src1: '',
               src2: '',
               src3: '',
               src4: '',
               src1_1: 'http://192.168.2.123:8080/img/shop_name.png',
               src1_2: 'http://192.168.2.123:8080/img/money.png',
               src1_3: 'http://192.168.2.123:8080/img/index_news.png',
               src1_4: 'http://192.168.2.123:8080/img/index_mine.png',
               money: '521.00',
               count1: '1245.0',
               count2: '1246.0',
               count3: '1209.0',
               list: [
                 {
                    date: '2018-3-8',
                    time: '10:36',
                    describe: '您的账户通过微信支付消费了52000000.00元',
                 },
                 {
                    date: '2018-3-8',
                    time: '10:36',
                    describe: '您的账户通过微信支付消费了52000000.00元',
                 },
                 {
                    date: '2018-3-8',
                    time: '10:36',
                    describe: '您的账户通过微信支付消费了52000000.00元',
                 },
                 {
                    date: '2018-3-8',
                    time: '10:36',
                    describe: '您的账户通过微信支付消费了52000000.00元',
                 },
               ]
            }
        },
        created () {
           
        },
        methods: {
           
        }
    }
</script>